<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js" defer></script>
    <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
    <link rel="stylesheet" href="./index.css" type="text/css">
</head>

<body>
    <canvas id="glcanvas" width="640px" height="640px"></canvas>
    <script id="vertex-shader" type="notjs">

        //attribute vec4 a_position
        attribute vec2 a_position;

        uniform vec2 u_resolution;

        void main() {
          // 从像素坐标转换到 0.0 到 1.0
          vec2 zeroToOne = a_position / u_resolution;

          // 再把 0->1 转换 0->2
          vec2 zeroToTwo = zeroToOne * 2.0;

          // 把 0->2 转换到 -1->+1 (裁剪空间)
          vec2 clipSpace = zeroToTwo - 1.0;

          // gl_Position = vec4(clipSpace, 0, 1);
          gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
        }

      </script>
    <!-- <script id="vertex-shader" type="notjs">
        attribute vec4 a_position;
        void main() {
            gl_Position = a_position;
        }
    </script> -->
    <script id="fragment-shader" type="notjs">
        precision mediump float;
 
        uniform vec4 u_color;
       
        void main() {
          gl_FragColor = u_color;
        }
    </script>
</body>

</html>